<template>
  <div class="login-view">
    <div class="background-cover">
      <span v-for="i in 10" :key="i" class="background-cover-circle"></span>
      <p style="position: absolute; bottom: 0; right: 1rem;">Copyright &copy; 2023 QCBlog.</p>
    </div>
    <div class="login">
      <div class="login-board">
        <div class="title">
          Sign in
        </div>
        <el-form
          size="large"
          status-icon
          ref="loginFormRef"
          :rules="rules"
          :model="loginForm"
        >
          <el-form-item prop="id">
            <el-input v-model="loginForm.id" placeholder="ID" :prefix-icon="User" class="input"/>
          </el-form-item>
          <el-form-item prop="password">
            <el-input v-model="loginForm.password" placeholder="Password" show-password :prefix-icon="Unlock" class="input"/>
          </el-form-item>
          <el-form-item>
            <el-switch v-model="loginForm.rememberMe" active-text="Remember me" style="--el-switch-on-color: #b6f188"/>
            <a style="position: absolute; right: 0;" @click="forget">忘记密码？</a>
          </el-form-item>
          <el-form-item style="margin-bottom: 0;">
            <el-button color="#e15958" size="large" class="button" @click="signIn">
              <span class="button_text">Sign in</span>
            </el-button>
          </el-form-item>
          <p class="or">or</p>
          <el-form-item>
            <el-button color="#4dcdef" size="large" class="button" @click="goToSignUp">
              <span class="button_text">Sign up</span>
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { Unlock, User } from '@element-plus/icons-vue';
import { ElNotification } from 'element-plus'
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { login } from '../api/api';
import { useStore } from '../stores/index'
import { decryptDES } from '../features/Des';

const loginForm = ref({
  id: '',
  password: '',
  rememberMe: false
})

// 验证表单数据
const loginFormRef = ref()
// ruls
const rules = ref({
  id: [
    { required: true, message: 'Please input the ID', trigger: 'blur' },
    { min: 3, message: 'Length should not be less than 3', trigger: 'blur'}
  ],
  password: [
    { required: true, message: 'Please input the Password', trigger: 'blur' },
    { min: 6, message: 'Length should not be less than 6', trigger: 'blur' }
  ]
})

// 登录
const signIn = () => {
  submitForm(loginFormRef)
}
// submit
const submitForm = (formEl) => {
  if (!formEl) return
  formEl.value.validate((valid) => {
    if (valid) {
      // console.log('submit!')
      goToLogin()
      return
    } else {
      // console.log('error submit!')
      return false
    }
  })
}

// 声明路由
const router = useRouter()
// 提交并验证登录数据
const goToLogin = () => {
  login(loginForm.value.id).then(response => {
    let data = response.data
    // 使用des解密
    let truePass = decryptDES(data.password)
    if(loginForm.value.password === truePass) {
      // 设置store
      const store = useStore()
      store.initStore(data)
      store.$patch({ userToken: data.id + data.name })
      // 设置localStorage 不用判空直接覆盖
      if (loginForm.value.rememberMe) {
        // 必须这么写，不然发布服务器报错（JSON.stringify的循环引用错误，我也不知道为什么！！！）
        let storeData = store.getStore()
        let userState = JSON.stringify(storeData)
        localStorage.setItem("userState", userState)
      }
      // 转跳页面
      router.push({name: 'home'})
      ElNotification({
        title: '登录成功！',
        message: '(๑•̀ㅂ•́)و✧早上好！' + response.data.name,
        type: 'success'
      })
    } else {
      ElNotification({
        title: '登录失败',
        message: '用户名或密码错误 Σ( ° △ °|||)︴',
        type: 'error'
      })
    }
  }).catch(error => {
    console.log(error);
    if (error.response.status == 404) {
      ElNotification({
        title: '登录失败',
        message: '没有该用户ID Σ( ° △ °|||)︴',
        type: 'error'
      })
    } else {
      ElNotification({
        title: '登录失败',
        message: error.message,
        type: 'error'
      })
    }
  })  
}
// 去注册
const goToSignUp = () => router.push({name: 'register'})

// 忘记密码
const forget = () => {
  ElNotification({
    title: '寄',
    message: '重新建个号吧( >﹏<。)',
    type: 'warning'
  })
}
</script>

<style scoped>
.login-view {
  height: 100vh;
  width: 100vw;
  background: url(https://sam-1306698532.cos.ap-nanjing.myqcloud.com/pic/bg1.png) no-repeat fixed;
  background-size: cover;
}
.background-cover {
  height: 100%;
  width: 100%;
  background-image: linear-gradient(rgba(0,0,0,0.1) 50%, transparent 0);
  background-size: 3px 3px;
  background-repeat: repeat;
  position: absolute;
}
.login {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-board {
  height: 30rem;
  width: 25rem;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 1rem;
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.login-board .title {
  flex: 1;
  text-align: center;
  font-size: 2rem;
  font-weight: 800;
}
.login-board .input {
  height: 2.8rem;
  font-size: .9rem;
}
.login-board .button {
  width: 100%;
  box-shadow: var(--el-box-shadow-light);
}
.button_text {
  font-size: .9rem;
  font-weight: 700;
  color: #fff;
}
.or {
  text-align: center;
  font-weight: 600;
  color: #A8ABB2;
}
.or::before {
  box-sizing: border-box;
  content: "";
  display: inline-block;
  width: 30%;
  height: 1px;
  position: relative;
  vertical-align: middle;
  background: linear-gradient(90deg,transparent,hsla(0,0%,45.9%,.4),hsla(0,0%,45.9%,.4));
  right: .5em;
  margin-left: -50%;
}
.or::after {
  box-sizing: border-box;
  content: "";
  display: inline-block;
  width: 30%;
  height: 1px;
  position: relative;
  vertical-align: middle;
  background: linear-gradient(90deg,hsla(0,0%,45.9%,.4),hsla(0,0%,45.9%,.4),transparent);
  left: .5em;
  margin-right: -50%;
}

.background-cover-circle {
  position: absolute;
  border-radius: 50%;
}

.background-cover-circle:nth-child(1) {
  height: 150px;
  width: 150px;
  bottom: auto;
  left: -4%;
  background: rgba(255, 255, 255, .1);
}
.background-cover-circle:nth-child(2) {
  height: 50px;
  width: 50px;
  top: 10%;
  right: 4%;
  background: rgba(255, 255, 255, .1);
}
.background-cover-circle:nth-child(3) {
  height: 50px;
  width: 50px;
  top: 280px;
  right: 5.66666%;
  background: rgba(255, 255, 255, .3);
}
.background-cover-circle:nth-child(4) {
  height: 75px;
  width: 75px;
  top: 320px;
  right: 7%;
  background: rgba(255, 255, 255, .15);
}
.background-cover-circle:nth-child(5) {
  height: 100px;
  width: 100px;
  top: 38%;
  right: auto;
  left: 1%;
  background: rgba(255, 255, 255, .05);
}
.background-cover-circle:nth-child(6) {
  width: 200px;
  height: 200px;
  top: 44%;
  right: auto;
  left: 10%;
  background: rgba(255, 255, 255, .15);
}
.background-cover-circle:nth-child(7) {
  height: 50px;
  width: 50px;
  right: 36%;
  bottom: 50%;
  background: rgba(255, 255, 255, .04);
}
.background-cover-circle:nth-child(8) {
  height: 100px;
  width: 100px;
  right: 2%;
  bottom: 70px;
  background: rgba(255, 255, 255, .2);
}
.background-cover-circle:nth-child(9) {
  height: 50px;
  width: 50px;
  right: 2%;
  bottom: 1%;
  background: rgba(255, 255, 255, .1);
}
.background-cover-circle:nth-child(10) {
  height: 100px;
  width: 100px;
  right: auto;
  bottom: 1%;
  left: 1%;
  background: rgba(255, 255, 255, .05);
}
</style>